<script setup>
import { ref, provide } from "vue";
defineOptions({
  name: "tabs",
});
const emit = defineEmits();
const props = defineProps(["modelValue"]);
const titles = ref([]);
const ps = ref("");
ps.value = props.modelValue
provide("panelshow", ps);

provide("addParTitle", (title) => {
  titles.value.push(title);
});

const handleChange = (item) => {
  emit("update:modelValue", item);
  ps.value = item
};
</script>

<template>
  <div class="tabs">
    <div class="title">
      <div
        v-for="(item, index) in titles"
        :key="index"
        @click="handleChange(item)"
      >
        {{ item }}
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.title {
  display: flex;
}
.title > div {
  margin: 0 20px;
  cursor: pointer;
  text-decoration: underline;
}
</style>
